<template>
  <el-menu
    :default-active="activeMenu"
    mode="horizontal"
    @select="handleSelect"
  >
    <template v-for="(item, index) in topMenus">
      <template v-if="index < visibleNumber">
        <el-menu-item
          :style="{ '--theme': theme }"
          :index="item.path"
          :key="index"
          v-if="!item.children || item.children.length == 0"
        >
          <svg-icon
            v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
            :icon-class="item.meta.icon"
          />
          {{ item.meta.title }}
        </el-menu-item>

        <el-submenu
          :style="{ '--theme': theme }"
          :index="item.path"
          :key="index"
          v-else
        >
          <template slot="title">
            <svg-icon
              v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
              :icon-class="item.meta.icon"
            />
            {{ item.meta.title }}</template
          >
          <template v-for="(itemc, indexc) in item.children">
            <el-menu-item
              :index="itemc.path"
              :key="indexc"
              v-if="!itemc.children || itemc.children.length == 0"
            >
              <svg-icon
                v-if="itemc.meta && itemc.meta.icon && itemc.meta.icon !== '#'"
                :icon-class="itemc.meta.icon"
              />
              {{ itemc.meta.title }}
            </el-menu-item>
            <el-submenu
              :style="{ '--theme': theme }"
              :index="itemc.path"
              :key="indexc"
              v-else
            >
              <template slot="title">
                <svg-icon
                  v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
                  :icon-class="item.meta.icon"
                />
                {{ itemc.meta.title }}
              </template>
              <template v-for="(itemcc, indexcc) in itemc.children">
                <el-menu-item
                  :index="itemc.path + '/' + itemcc.path"
                  :key="indexcc"
                  v-if="!itemcc.children || itemcc.children.length == 0"
                >
                  <svg-icon
                    v-if="
                      itemcc.meta &&
                      itemcc.meta.icon &&
                      itemcc.meta.icon !== '#'
                    "
                    :icon-class="itemcc.meta.icon"
                  />
                  {{ itemcc.meta.title }} 
                </el-menu-item>
              </template>
            </el-submenu>
          </template>
        </el-submenu>
      </template>
    </template>

    <!-- 顶部菜单超出数量折叠 -->
    <el-submenu
      :style="{ '--theme': theme }"
      index="more"
      v-if="topMenus.length > visibleNumber"
    >
      <template slot="title">更多菜单</template>
      <template v-for="(item, index) in topMenus">
        <template v-if="index >= visibleNumber">

          <el-menu-item
              :index="item.path"
              :key="index"
              v-if="!item.children || item.children.length == 0"
            >
              <svg-icon
                v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
                :icon-class="item.meta.icon"
              />
              {{ item.meta.title }}
            </el-menu-item>
            <el-submenu
              :style="{ '--theme': theme }"
              :index="item.path"
              :key="index"
              v-else
            >
              <template slot="title">
                <svg-icon
                  v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
                  :icon-class="item.meta.icon"
                />
                {{ item.meta.title }}
              </template>
              <template v-for="(itemc, indexc) in item.children">
                <el-menu-item
                  :index="itemc.path"
                  :key="indexc"
                  v-if="!itemc.children || itemc.children.length == 0"
                >
                  <svg-icon
                    v-if="
                      itemc.meta &&
                      itemc.meta.icon &&
                      itemc.meta.icon !== '#'
                    "
                    :icon-class="itemc.meta.icon"
                  />
                  {{ itemc.meta.title }} 
                </el-menu-item>

                <el-submenu
                  :style="{ '--theme': theme }"
                  :index="item.path"
                  :key="indexc"
                  v-else
                >
                  <template slot="title">
                    <svg-icon
                      v-if="itemc.meta && itemc.meta.icon && itemc.meta.icon !== '#'"
                      :icon-class="itemc.meta.icon"
                    />
                    {{ itemc.meta.title }}
                  </template>
                  <template v-for="(itemd, indexd) in itemc.children">
                    <el-menu-item
                      :index="itemc.path + '/' + itemd.path"
                      :key="indexd"
                      v-if="!itemd.children || itemd.children.length == 0"
                    >
                      <svg-icon
                        v-if="
                          itemd.meta &&
                          itemd.meta.icon &&
                          itemd.meta.icon !== '#'
                        "
                        :icon-class="itemd.meta.icon"
                      />
                      {{ itemd.meta.title }}
                    </el-menu-item>
                  </template>
                </el-submenu>
              </template>
            </el-submenu>
        </template>
      </template>
    </el-submenu>
  </el-menu>
</template>

<script>
import { constantRoutes } from "@/router";
import Layout from '@/layout'

// 隐藏侧边栏路由
const hideList = ["/index", "/user/profile"];

export default {
  data() {
    return {
      // 顶部栏初始数
      visibleNumber: 5,
      // 当前激活菜单的 index
      currentIndex: undefined,
    };
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme;
    },
    // 顶部显示菜单
    topMenus() {
      let topMenus = [];
      let routersStr = JSON.stringify(this.routers)
      if (routersStr.indexOf('"首页"') === -1) {
        topMenus.push( {
          path: '/',
          component: () => import('@/views/index'),
          name: 'Index',
          meta: { title: '首页', icon: 'dashboard', affix: true }
        })
      }
      this.routers.map((menu) => {
        if (menu.hidden !== true) {
          if (menu.children) {
            menu.children = menu.children.filter(childrenItem => {
              return childrenItem.hidden !== true
            })
            menu.children.map(childrenItem => {
              if (childrenItem.children) {
                childrenItem.children = childrenItem.children.filter(childrenChildrenItem => {
                  return childrenChildrenItem.hidden !== true
                })
              }
            })
          }
          
          // 兼容顶部栏一级菜单内部跳转
          if (menu.path === "/") {
            if (menu.children[0]) {
              topMenus.push(menu.children[0]);
            }
          } else {
            topMenus.push(menu);
          }
        }
      });
      return topMenus;
    },
    // 所有的路由信息
    routers() {
      return this.$store.state.permission.topbarRouters;
    },
    // 设置子路由
    childrenMenus() {
      var childrenMenus = [];
      this.routers.map((router) => {
        for (var item in router.children) {
          if (router.children[item].parentPath === undefined) {
            if (router.path === "/") {
              router.children[item].path = "/" + router.children[item].path;
            } else {
              if (!this.ishttp(router.children[item].path)) {
                router.children[item].path =
                  router.path + "/" + router.children[item].path;
              }
            }
            router.children[item].parentPath = router.path;
          }
          childrenMenus.push(router.children[item]);
        }
      });
      return constantRoutes.concat(childrenMenus);
    },
    // 默认激活的菜单
    activeMenu() {
      const path = this.$route.path;
      let activePath = path;
      if (
        path !== undefined &&
        path.lastIndexOf("/") > 0 &&
        hideList.indexOf(path) === -1
      ) {
        const tmpPath = path.substring(1, path.length);
        activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
        if (!this.$route.meta.link) {
          this.$store.dispatch("app/toggleSideBarHide", false);
        }
      } else if (!this.$route.children) {
        activePath = path;
        this.$store.dispatch("app/toggleSideBarHide", true);
      }
      this.activeRoutes(activePath);
      return activePath;
    },
  },
  beforeMount() {
    window.addEventListener("resize", this.setVisibleNumber);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.setVisibleNumber);
  },
  mounted() {
    this.setVisibleNumber();
  },
  methods: {
    // 根据宽度计算设置显示栏数
    setVisibleNumber() {
      const width = document.querySelector('.navbar').offsetWidth
      this.visibleNumber = parseInt((width - 750) / 85);
    },
    // 菜单选择事件
    handleSelect(key, keyPath) {
      this.currentIndex = key;
      const route = this.routers.find((item) => item.path === key);
      if (this.ishttp(key)) {
        // http(s):// 路径新窗口打开
        window.open(key, "_blank");
      } else if (!route || !route.children) {
        // 没有子路由路径内部打开
        const routeMenu = this.childrenMenus.find((item) => item.path === key);
        if (routeMenu && routeMenu.query) {
          let query = JSON.parse(routeMenu.query);
          this.$router.push({ path: key, query: query });
        } else {
          this.$router.push({ path: key });
        }
        this.$store.dispatch("app/toggleSideBarHide", true);
      } else {
        // 显示左侧联动菜单
        this.activeRoutes(key);
        this.$store.dispatch("app/toggleSideBarHide", false);
      }
    },
    // 当前激活的路由
    activeRoutes(key) {
      var routes = [];
      if (this.childrenMenus && this.childrenMenus.length > 0) {
        this.childrenMenus.map((item) => {
          if (key == item.parentPath || (key == "index" && "" == item.path)) {
            routes.push(item);
          }
        });
      }
      if (routes.length > 0) {
        this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
      } else {
        this.$store.dispatch("app/toggleSideBarHide", true);
      }
    },
    ishttp(url) {
      return url.indexOf("http://") !== -1 || url.indexOf("https://") !== -1;
    },
  },
};
</script>


<style lang="scss">
.topmenu-container.el-menu--horizontal>.el-menu-item {
  float: left;
  height: 50px !important;
  line-height: 50px !important;
  color: #999093 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
}

.topmenu-container.el-menu--horizontal>.el-menu-item.is-active,
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #{'var(--theme)'} !important;
  color: #303133;
}

/* submenu item */
.topmenu-container.el-menu--horizontal>.el-submenu .el-submenu__title {
  float: left;
  height: 50px !important;
  line-height: 50px !important;
  color: #999093 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
}


.topmenu-container.el-menu--horizontal>.el-menu-item.is-active{
  background-color: #409EFF;
  color: #ffffff !important;
}
</style>
